<!DOCTYPE html>
<html>
  <head>
    <script src="../dist/jspsych.js"></script>
    <script src="../dist/plugin-maxdiff.js"></script>
    <link rel="stylesheet" href="../dist/jspsych.css">
  </head>
  <body></body>
  <script>

    var jsPsych = initJsPsych({
      on_finish: function() {
        jsPsych.data.displayData();
      }
    });

    var maxdiff_trial = {
      type: jsPsychMaxdiff,
      alternatives: ['apple', 'orange', 'pear', 'banana'],
      labels: ['Most Preferred', 'Least Preferred'],
      preamble: '<p> Please select your <b>most preferred</b> and <b>least preferred</b> fruits. </p>'
    };

    var maxdiff_trial_random_required = {
      type: jsPsychMaxdiff,
      alternatives: ['strawberry', 'watermelon', 'kiwi', 'grapefruit'],
      labels: ['Most Preferred', 'Least Preferred'],
      preamble: '<p> Please select your <b>most preferred</b> and <b>least preferred</b> fruits. </p>',
      randomize_alternative_order: true,
      required: true
    };

    jsPsych.run([maxdiff_trial, maxdiff_trial_random_required]);

  </script>
</html>